<script setup>
import {ref, onMounted, computed} from 'vue';
import { ArrowLeftBold, ArrowRight, ArrowRightBold, QuestionFilled } from "@element-plus/icons-vue";
import router from "@/router";
import axios from "axios";
import * as echarts from 'echarts';
// 定义企业信息数组
const companies = ref([
  {
    company:[{
      companyName: '拼多多',
      companyIcon: '../../public/pinduoduo.png',
      companyIPO: '已上市',
      companyScale: '9999+',
      companyField: '电子商务',
      myAdvantage:'吹牛逼',
      myShortage:'爱睡觉',
      myAdvice:'少吹牛逼多睡觉',
    },{
      companyName: '阿里巴巴',
      companyIcon: '../../public/alibaba.png',
      companyIPO: '已上市',
      companyScale: '50000+',
      companyField: '电子商务、云计算',
      myAdvantage: '创新能力强',
      myShortage: '工作强度大',
      myAdvice: '保持工作与生活的平衡',
    }
    ],
    mainPosition:
      { title: 'web前端', match: '88%' }
  },
  {
    company:[{
      companyName: '阿里巴巴',
      companyIcon: '../../public/alibaba.png',
      companyIPO: '已上市',
      companyScale: '50000+',
      companyField: '电子商务、云计算',
      myAdvantage: '创新能力强',
      myShortage: '工作强度大',
      myAdvice: '保持工作与生活的平衡',
    }
    ],
    mainPosition:
      { title: '数据分析师', match: '90%' },
  }
  // 可以添加更多公司信息
]);
const comp = ref();
const chartContainer = ref(null);
const getImageUrl = (iconName) => {
  return import.meta.env.BASE_URL + iconName;
};
const activeButtonIndex = ref(0);
const buttonClasses = computed(() => {
  return [
    activeButtonIndex.value === 0? 'active' : 'inactive',
    activeButtonIndex.value === 1? 'active' : 'inactive',
    activeButtonIndex.value === 2? 'active' : 'inactive'
  ];
});
const displayStyles = computed(() => {
  return {
    myAdvantage: activeButtonIndex.value === 0? 'display: block' : 'display: none',
    myShortage: activeButtonIndex.value === 1? 'display: block' : 'display: none',
    myAdvice: activeButtonIndex.value === 2? 'display: block' : 'display: none'
  };
});
// 当前激活的公司索引
const activeCompanyIndex = ref(0);
const CompanyIndex = ref(0);
const salaryscore = ref(0);
const locationscore = ref(0);
const abilityscore = ref(0);
const deliverDate = ref(new Date());
// 切换到下一个公司的函数
// 切换到下一个公司的函数
const nextCompany = () => {
  if (CompanyIndex.value < comp.value[activeCompanyIndex.value].enterprises.length - 1) {
    CompanyIndex.value++;
  } else {
    CompanyIndex.value = 0; // 如果已经是最后一个公司，则回到第一个
  }
  salaryscore.value = comp.value[activeCompanyIndex.value].enterprises[CompanyIndex.value].evaluate.salaryscore
  locationscore.value = comp.value[activeCompanyIndex.value].enterprises[CompanyIndex.value].evaluate.locationscore
  abilityscore.value = comp.value[activeCompanyIndex.value].enterprises[CompanyIndex.value].evaluate.abilityscore
  const myChart = echarts.init(chartContainer.value);
  const option = {
    grid: {
      top: '4%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['薪资评估分数', '位置评估分数', '能力评估分数']
    },
    yAxis: {
      type: 'value',
      min: 0, // 设置 y 轴的最小值
      max: 10  // 设置 y 轴的最大值
    },
    series: [
      {
        data: [salaryscore.value, locationscore.value, abilityscore.value],
        type: 'bar'
      }
    ]
  };
  myChart.setOption(option);
};
const changeActiveCompanyIndex = (companyIndex) =>{
  // 更改 activeCompanyIndex 的值，可以根据需要进行相应的逻辑处理
  activeCompanyIndex.value = companyIndex;
  CompanyIndex.value = 0;
  salaryscore.value = comp.value[activeCompanyIndex.value].enterprises[0].evaluate.salaryscore
  locationscore.value = comp.value[activeCompanyIndex.value].enterprises[0].evaluate.locationscore
  abilityscore.value = comp.value[activeCompanyIndex.value].enterprises[0].evaluate.abilityscore
  const myChart = echarts.init(chartContainer.value);
  const option = {
    xAxis: {
      grid: {
        top: '4%',
        containLabel: true
      },
      type: 'category',
      data: ['薪资评估分数', '位置评估分数', '能力评估分数']
    },
    yAxis: {
      type: 'value',
      min: 0, // 设置 y 轴的最小值
      max: 10  // 设置 y 轴的最大值
    },
    series: [
      {
        data: [salaryscore.value, locationscore.value, abilityscore.value],
        type: 'bar'
      }
    ]
  };
  myChart.setOption(option);
};
const resume = () => {
  // 这里添加你的登录逻辑
  // 假设登录成功后，跳转到仪表盘页面
  router.push('/resume');
};
const formatDate = (date) => {
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, '0');
  const day = date.getDate().toString().padStart(2, '0');
  return `${year}-${month}-${day}`;
};
const post = () => {
  axios.post("http://localhost:8082/deliver/insertDeliver",{
    seekerid:comp.value[activeCompanyIndex.value].seekerid,
    enterpriseid:comp.value[activeCompanyIndex.value].enterprises[CompanyIndex.value].enterpriseid,
    jobid:comp.value[activeCompanyIndex.value].jobid,
    status:"投递中",
    deliverdate:formatDate(deliverDate.value)
  }).then((response) => {
    if (response.data.success) {
      console.log(response.data);
      router.push('/myDeliver');
    }
  })
  // 这里添加你的登录逻辑
  // 假设登录成功后，跳转到仪表盘页面
};
const myDeliver = () => {
  // 这里添加你的登录逻辑
  // 假设登录成功后，跳转到仪表盘页面
  router.push('/myDeliver');
};
const exit = () => {
  router.push('/');
}
onMounted( () => {
  const dataFromPreviousPage = JSON.parse(localStorage.getItem('dataFromPreviousPage'));
  axios.post('http://localhost:8082/evaluate/selectBySeeker',
      {
        seekerid: dataFromPreviousPage.context.seekerid,
      }, {
        headers: {
          'Content-Type': 'application/json',
        },
      }).then(response => {
    console.log(response.data);
    comp.value = response.data;
    console.log(comp.value[0].enterprises[0].evaluate.salaryscore);
    salaryscore.value = comp.value[0].enterprises[0].evaluate.salaryscore
    locationscore.value = comp.value[0].enterprises[0].evaluate.locationscore
    abilityscore.value = comp.value[0].enterprises[0].evaluate.abilityscore
    const myChart = echarts.init(chartContainer.value);
    const option = {
      grid: {
        top: '4%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: ['薪资评估分数', '位置评估分数', '能力评估分数']
      },
      yAxis: {
        type: 'value',
        min: 0, // 设置 y 轴的最小值
        max: 10  // 设置 y 轴的最大值
      },
      series: [
        {
          data: [salaryscore.value, locationscore.value, abilityscore.value],
          type: 'bar'
        }
      ]
    };
    myChart.setOption(option);
    console.log(comp.value);
  }).catch(error => {
    console.error('跳转出错:', error);
  });

});
</script>

<template>
  <div class="body1" style="background-color: #DBE2EF;background-size: cover;">
    <el-row justify="center">
      <h1 style="color:#3F72AF;font-size: 36px">适配企业</h1>
      <h3 style="color:#3F72AF;margin-top:38px">（测试版）</h3>
    </el-row>
    <el-row  justify="center" style="">
      <el-col :span="24" style="justify-content: center;text-align: center;">
        <div class="card3" style="background-color: #f9f7f7;width: 1300px">
          <el-row>
            <hr style="border-radius: 5px;border: 0; height: 5px; width:600px; background-color: #BBBBBB;" />
          </el-row>
          <el-row>
            <hr style="border-radius: 5px;border: 0; height: 5px; width:300px; background-color: #BBBBBB;" />
          </el-row>
          <el-row>

            <!-- 只有一个 el-col，内容根据 activeCompanyIndex 变化 -->
            <el-col :span="5" class="background1" style="margin-left: 20px">
              <el-row v-for="(company, companyIndex) in comp" :key="`company-${companyIndex}`"@click="changeActiveCompanyIndex(companyIndex)" >
                  <h2 style="text-align: left">{{ company.jobname }}</h2>
                  <h2 style="text-align: left">({{ company.averagescore | toInteger }}分)</h2>
              </el-row>
            </el-col>
            <el-col span="19" class="background2" >
              <el-row>
                <el-col class="background3" span="12">
                  <el-row>
                    <label v-if="comp && comp[activeCompanyIndex] && comp[activeCompanyIndex].enterprises && comp[activeCompanyIndex].enterprises[CompanyIndex]" style="text-align: left;font-size: 32px;font-weight: bold" >{{comp[activeCompanyIndex].enterprises[CompanyIndex].enterprisename}}</label>
                  </el-row>
                  <h2 v-if="comp && comp[activeCompanyIndex] && comp[activeCompanyIndex].enterprises && comp[activeCompanyIndex].enterprises[CompanyIndex]" style="text-align: left">企业地址：{{comp[activeCompanyIndex].enterprises[CompanyIndex].location}}</h2>
                  <h2 v-if="comp && comp[activeCompanyIndex] && comp[activeCompanyIndex].enterprises && comp[activeCompanyIndex].enterprises[CompanyIndex]" style="text-align: left">企业福利：{{comp[activeCompanyIndex].enterprises[CompanyIndex].welfare}}</h2>
                  <h2 v-if="comp && comp[activeCompanyIndex] && comp[activeCompanyIndex].enterprises && comp[activeCompanyIndex].enterprises[CompanyIndex]" style="text-align: left">经营情况：{{comp[activeCompanyIndex].enterprises[CompanyIndex].bussinessinformation}}</h2>
                </el-col>
                <el-col class="background3" span="12">
                  <div ref="chartContainer" style="width: 100%; height: 300px;"></div>
                </el-col>
              </el-row>
              <el-row>
                <el-button-group style="margin: 20px">
                  <button :class="buttonClasses[0]" @click="activeButtonIndex = 0" class="btn">我的优势</button>
                  <button :class="buttonClasses[1]" @click="activeButtonIndex = 1" class="btn">我的不足</button>
                  <button :class="buttonClasses[2]" @click="activeButtonIndex = 2" class="btn">改进建议</button>
                </el-button-group>
              </el-row>
              <el-row>
                <div class="myDiv" :style="displayStyles.myAdvantage">
                  <label v-if="comp && comp[activeCompanyIndex] && comp[activeCompanyIndex].enterprises && comp[activeCompanyIndex].enterprises[CompanyIndex]">{{comp[activeCompanyIndex].enterprises[CompanyIndex].evaluate.advantage}}</label>
                </div>
                <div class="myDiv" :style="displayStyles.myShortage">
                  <label v-if="comp && comp[activeCompanyIndex] && comp[activeCompanyIndex].enterprises && comp[activeCompanyIndex].enterprises[CompanyIndex]">{{comp[activeCompanyIndex].enterprises[CompanyIndex].evaluate.shortcoming}}</label>
                </div>
                <div class="myDiv" :style="displayStyles.myAdvice">
                  <label v-if="comp && comp[activeCompanyIndex] && comp[activeCompanyIndex].enterprises && comp[activeCompanyIndex].enterprises[CompanyIndex]">{{comp[activeCompanyIndex].enterprises[CompanyIndex].evaluate.improvement}}</label>
                </div>
            </el-row>
            </el-col>
          </el-row>
          <el-row>
            <label style="color: #888888;margin:20px;margin-left:80px;font-size: 18px">推荐不准？告诉我们</label>
            <el-button class="btn1" @click="post">投递简历</el-button>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
  <el-button circle style="background-color: #3F72AF;padding: 50px;border:0;box-shadow: 5px 5px 5px 2px #444444;
  z-index: 99;position: absolute; top: 2%; left: 170px; transform: translateY(50%);"
  ></el-button>
  <el-image src="../../public/next.png" @click="nextCompany()" style="width: 120px;height: 120px;margin-right: 5px;
            z-index: 99;position: absolute; top: 72%; right: 184px; transform: translateY(50%);">
  </el-image>
  <el-dropdown placement="bottom" style=" z-index: 99;position: absolute; top: 1%; right: 2%; transform: translateY(50%);" size="large">
    <span class="dropdown"> 我的 </span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item @click="resume">AI简历</el-dropdown-item>
        <el-dropdown-item @click="myDeliver">我的投递</el-dropdown-item>
        <el-dropdown-item @click="exit">退出登录</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<style scoped>
@import "../assets/css/global.css";
.background1 {
  margin-top: 40px;
  background-color: #DBE2EF;
  border-radius: 15px;
  height: 520px;
  width: 250px;
  padding: 10px;
}
.background2 {
  margin-top: 40px;
  background-color: #DBE2EF;
  border-radius: 15px;
  height: 500px;
  width: 900px;
  padding: 10px;
  margin-left: 30px;
}
.background3 {
  margin-top: 10px;
  background-color: #f9f7f7;
  border-radius: 15px;
  height: 220px;
  width: 400px;
  padding: 10px;
  margin-left: 20px;
}
.btn {
  padding: 10px 40px;
  border: none;
  color: white;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
  border-radius: 15px;
}
.btn1 {
  padding: 20px 40px;
  border: none;
  background-color: #f9f7f7;
  color: #3F72AF;
  font-size: 24px;
  cursor: pointer;
  transition: background-color 0.3s;
  border-radius: 10px;
  margin:20px;
  margin-left:430px;
}
.btn1:hover{
  background-color: #3F72AF;
  color: #f9f7f7;
}
/* 活动状态按钮样式 */
.btn.active {
  background-color: #3F72AF; /* 蓝色背景 */
  color: #f9f7f7; /* 白色文字 */
}

/* 非活动状态按钮样式 */
.btn.inactive {
  background-color: #f9f7f7; /* 白色背景 */
  color: #3F72AF; /* 蓝色文字 */
}
.myDiv{
  background-color: #f9f7f7;
  border-radius: 15px;
  height: 130px;
  width: 840px;
  padding: 10px;
  margin-left: 20px;
  overflow-y: auto;
}
/* 滚动条整体部分 */
::-webkit-scrollbar {
  width: 8px; /* 垂直滚动条的宽度 */
  height: 4px; /* 水平滚动条的高度 */
}
::-webkit-scrollbar-thumb {
  background-color: #3F72AF; /* 滑块颜色 */
  border-radius: 8px; /* 滑块圆角 */
}
::-webkit-scrollbar-track {
  width: 8px;
  height: 4px;
  border-radius: 8px;
  background-color: transparent; /* 轨道颜色 */
}
.card3{
  margin: auto;
  text-align: center;
  justify-content: center;
  width: 936px;
  height: 700px;
  border: #bbbbbb solid 1px;
  border-radius: 50px;
  background: #DBE2EF;
  box-shadow: 15px 15px 20px 2px #444444;
  z-index: 1; /* 确保card2层级低于card1 */
}
.dropdown{
  background-color: #f9f7f7;
  color: #3F72AF;
  width: 150px;
  height: 30px;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  border-radius: 10px;
}
.dropdown:hover{
  background-color: #3F72AF;
  color: #f9f7f7;
  width: 150px;
  height: 30px;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  border-radius: 10px;
}
:deep(.el-tooltip__trigger:focus-visible) {
  outline: unset;
}
</style>